import { forEach } from 'lodash-es';
import store from '@/store/index.js';
let sideTheme = store.state.global.setting.sideTheme ?? 'theme-dark';
export const basicLineLegend = {
  icon: 'rect',
  itemWidth: 10,
  itemHeight: 4,
  textStyle: { color: '#7f889a' },
};
export const basicLineXAxis = {
  type: 'category',
  boundaryGap: 1,
  axisLine: {
    show: true,
    lineStyle: {
      color: '#283147',
    },
  },
  axisLabel: {
    show: true,
    color: '#7f889a',
    fontSize: 12,
  },
  splitLine: {
    show: false,
  },
  axisTick: {
    show: false,
  },
};
export const basicLineYAxis = {
  type: 'value',
  name: '',
  nameTextStyle: { color: '#7f889a', align: 'left' },
  padding: 5,
  alignTicks: true,
  splitLine: {
    show: true,
    lineStyle: {
      color: 'rgba(127, 136, 154, 0.5)',
      type: 'dashed',
    },
  },
  axisLine: {
    show: false,
    lineStyle: {
      color: '#283147',
    },
  },
  axisLabel: {
    show: true,
    margin: 10,
    color: '#7f889a',
  },
  axisTick: { show: false },
};
export const basicDataZoom = [
  {
    type: 'inside',
    show: true,
    // filterMode: 'filter',
    xAxisIndex: [0],
    start: 0,
    end: 100,
  },
  {
    type: 'slider',
    show: true,
    // filterMode: 'filter',
    xAxisIndex: [0],
    start: 0,
    end: 100,
    height: 15,
    bottom: 5,
    borderColor: 'transparent',
    backgroundColor: 'rgba(0,0,0,0)',
    brushSelect: false,
  },
];
export const basicTooltip = {
  trigger: 'axis',
  confine: true,
  backgroundColor: sideTheme === 'theme-dark' ? 'rgba(47,59,96,0.94)' : '#fff',
  borderWidth: '0', //边框宽度设置1
  borderColor: sideTheme === 'theme-dark' ? '#245288' : '#d5d5d5', //设置边框颜色
  textStyle: { color: sideTheme === 'theme-dark' ? '#f5f5f5' : '#303133' },
  axisPointer: {
    type: 'shadow',
    shadowStyle: { color: 'rgba(220, 220, 220, 0.1)' },
  },
};
export const basicTitle = {
  textStyle: { fontWeight: 'bold' },
  subtextStyle: { color: '#7f889a' },
  padding: 0,
  left: 0,
  top: 0,
};
export const basicTooltipFormatter = {
  formatter: params => {
    if (Array.isArray(params) && params.length > 0) {
      let str = `<div class="u-mb5">${params[0].axisValue}</div>`;
      forEach(params, e => {
        let seriesName = e.seriesName;
        const value = e.value[e.dimensionNames[e.encode.y]] ?? '--';
        str += `<ul class="u-df-spb u-mb5"><li>${e.marker}${seriesName}</li><li class="u-ml30">${value}</li></ul>`;
      });
      return str;
    }
    return '';
  },
};
